<template>
    <div class="home com-class">
        <div class="left-div">
            <div class="fengxianyinhuan">
                <p class="title">风险隐患</p>
                <p class="title2">自然灾害风险隐患</p>
                <div class="items-container">
                    <a class="items-image items-image-1"></a>
                    <div class="items-sub-container">
                        <p class="top">
                            <span type='number'>128</span>
                            <span type='unit'>处</span>
                        </p>
                        <p class="bottom">积水风险点</p>
                    </div>
                </div>
                <div class="items-container">
                    <a class="items-image items-image-2"></a>
                    <div class="items-sub-container">
                        <p class="top">
                            <span type='number'>3264</span>
                            <span type='unit'>km<sup style="font-size: 8px;">2</sup></span>
                        </p>
                        <p class="bottom">林地总面积</p>
                    </div>
                </div>
                <p class="title2">安全生产风险隐患</p>
                <div class="items-container">
                    <a class="items-image items-image-3"></a>
                    <div class="items-sub-container">
                        <p class="top">
                            <span type='number'>270,089</span>
                            <span type='unit'>处</span>
                        </p>
                        <p class="bottom">八大行业企业总数</p>
                    </div>
                </div>
                <div class="items-container">
                    <a class="items-image items-image-4"></a>
                    <div class="items-sub-container">
                        <p class="top">
                            <span type='number'>4</span>
                            <span type='unit'>个</span>
                        </p>
                        <p class="bottom">重大隐患总数</p>
                    </div>
                </div>
                <div class="items-container">
                    <a class="items-image items-image-5"></a>
                    <div class="items-sub-container">
                        <p class="top">
                            <span type='number'>3241</span>
                            <span type='unit'>家</span>
                        </p>
                        <p class="bottom">危化品企业总数</p>
                    </div>
                </div>
                <div class="items-container">
                    <a class="items-image items-image-6"></a>
                    <div class="items-sub-container">
                        <p class="top">
                            <span type='number'>49</span>
                            <span type='unit'>个</span>
                        </p>
                        <p class="bottom">重大危险源总数</p>
                    </div>
                </div>
            </div>
            <div class="yunshu">
                <p class="title">危化品运输</p>
                <div class="items-container">
                    <p class="bold"><span>684,28</span> 份</p>
                    <p class="bottom">月危化品运单量</p>
                </div>
                <div class="items-container-2">
                    <p>同比: <span class="number font-color-red font-bold">10%</span><a class="jiantou-img data-up"></a></p>
                    <p>环比: <span class="number font-color-red font-bold">10%<a class="jiantou-img data-up"></a></span></p>
                </div>
                <div class="items-container">
                    <p class="bold"><span>1919</span> 个</p>
                    <p class="bottom">实时危化品运输量</p>
                </div>

            </div>
            <div class="cunliang">
                <p class="title">危化品存量</p>
                <div class="content">
                    <div class="item-1">
                        <p order='1'>
                            <span class="value">15,945,421</span>
                            <span class="unit">吨</span>
                        </p>
                        <p order='2'>
                            <span order='1'>总量</span>
                            <span order='2'>环比: </span>
                            <span order='3' class="font-color-red font-bold">10%</span>
                            <a class="jiantou-img data-up"></a>
                        </p>
                    </div>
                    <div ref='echartLeft1' class="echartLeft1">

                    </div>
                    <div class="item-3">
                        <p order='1'>
                            <span class="value-1">2,613,647</span>
                            <span class="unit">吨</span>
                        </p>
                        <p class="type">流入量</p>
                        <p order='2'>
                            <span class="value-2">25,215,912</span>
                            <span class="unit">吨</span>
                        </p>
                        <p class="type">流出量</p>
                    </div>

                </div>

            </div>

        </div>


        <div class="center-div">
            <BaseMap v-if="mapShow" show-type="hiddenDanger" :area-code="$local.getAreaCode()" :area-type="$local.getAreaType()" @changeMapArea="changeMapArea"></BaseMap>
        </div>


        <div class="right-div">
            <div class="container" c-1>
                <p class="title">危险化学品企业</p>
                <p class="text">
                    <span order='1'>涉危企业</span>
                    <span order='2'>3241</span>
                    <span order='3'>家</span>
                    <span order='4'>环比: </span>
                    <span order='5' class="font-color-red font-bold">10%</span>
                    <a class="jiantou-img data-up"></a>
                </p>
                <p class="title-2">隐患排查</p>
                <div ref="echartRight1" class="echartRight1"></div>

            </div>
            <div class="container" c-2>
                <p class="title">八大行业监管</p>
                <p class="title-2">隐患执法</p>
                <div ref="echartRight2" class="echartRight2"></div>
                <p class="title-2 margin-top">重大隐患行业监督</p>
                <div ref="echartRight3" class="echartRight3"></div>
            </div>
        </div>

    </div>
</template>

<script>
    import BaseMap from '../../../../components/BaseMap/BaseMap'
    export default {
        name: "home",
        data() {
            return {
                mapShow: true,
                echartsOptionLeft1: {},
                echartsOptionRight1: {},
                echartsOptionRight2: {},
                echartsOptionRight3: {},
                echartObjLeft1: {},
                echartObjRight1: {},
                echartObjRight2: {},
                echartObjRight3: {},
            }
        },
        methods: {
            //地图区域发生变化
            changeMapArea() {
                //重新渲染地图组件
                this.reloadMap();
                //todo: 修改各个区域的数据
            },
            //强制重新渲染地图
            reloadMap() {
                // 移除组件
                this.mapShow = false;
                // 在组件移除后，重新渲染组件
                // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
                this.$nextTick(() => {
                    this.mapShow = true;
                })
            },
            pipeLegend(param, flag) {
                let v = '';
                if(flag === '隐患排查')
                    switch (param){
                        case '已整改':
                            v = 41;
                            break;
                        case '整改中':
                            v = 20;
                            break;
                        case '未整改':
                            v = 20;
                            break;
                        default:
                            v = 0;
                    }
                if(flag === '重大隐患行业监督')
                    switch (param){
                        case '冶金行业':
                            v = 41;
                            break;
                        case '机械行业':
                            v = 20;
                            break;
                        case '烟草行业':
                            v = 20;
                            break;
                        case '有色行业':
                            v = 20;
                            break;
                        case '轻工行业':
                            v = 20;
                            break;
                        case '商贸行业':
                            v = 20;
                            break;
                        case '建材行业':
                            v = 20;
                            break;
                        case '纺织行业':
                            v = 20;
                            break;
                    }
                return `${param}: ${v} 项`;
            },
            initEcharts(container, option) {
                let e = this.$echarts.init(container);
                e.setOption(option);
                return e;
            },

        },
        created() {
            let _this = this;
            this.echartsOptionLeft1 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                    show:true,
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['流入量','流出量'],
                    show:false
                },
                label:{
                    formatter:function(param){
                        return param.name
                    },
                },
                series: [
                    {
                        name: '统计信息',
                        type: 'pie',
                        radius: ['55%', '75%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 2613647, name: '流入量',itemStyle:{color: '#00b7ee'}},
                            {value: 25215912, name: '流出量',itemStyle:{color: '#f1bc30'}}

                        ]
                    }
                ]
            };
            this.echartsOptionRight1 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)',
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    orient: 'vertical',
                    top: 'center',
                    right: '10%',
                    icon: 'circle',
                    data: ['已整改', '整改中', '未整改'],
                    formatter:function(param) {
                        return _this.pipeLegend(param, '隐患排查')
                    },
                    itemGap:20,
                    itemHeight:20,
                    textStyle:{
                        fontSize:18,
                    }
                },
                label:{
                    formatter:function(param){
                        return param.value;
                    },
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['65%', '85%'],
                        center: ['20%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 41, name: '已整改',itemStyle: { color: '#b3d465' }},
                            {value: 20, name: '整改中',itemStyle: { color: '#00b7ee' }},
                            {value: 20, name: '未整改',itemStyle: { color: '#f29c9f' }},
                        ]
                    }
                ]
            };
            this.echartsOptionRight2 = {
                title: {
                    text: '折线图堆叠',
                    show:false
                },
                tooltip: {
                    trigger: 'axis',
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    data: ['一般隐患', '执行隐患', '重大隐患'],
                    right:0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        // saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],

                },
                yAxis: {
                    type: 'value',
                    splitLine:{
                        show:false
                    }
                },
                series: [
                    {
                        name: '一般隐患',
                        type: 'line',
                        stack: '总量',
                        data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101],
                        itemStyle:{
                            color:'#f29c9f'
                        }
                    },
                    {
                        name: '执行隐患',
                        type: 'line',
                        stack: '总量',
                        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191],
                        itemStyle:{
                            color:'#f1bc30'
                        }
                    },
                    {
                        name: '重大隐患',
                        type: 'line',
                        stack: '总量',
                        data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201],
                        itemStyle:{
                            color:'#b3d465'
                        }
                    }
                ]
            };
            this.echartsOptionRight3 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)',
                    transitionDuration: 0,//解决echarts图闪动
                },
                legend: {
                    orient: 'vertical',
                    top: 'center',
                    height: 150,
                    right: 0,
                    icon: 'circle',
                    data: ['冶金行业', '机械行业', '烟草行业', '有色行业'
                        , '轻工行业', '商贸行业', '建材行业', '纺织行业'],
                    formatter:function(param) {
                        return _this.pipeLegend(param, '重大隐患行业监督')
                    },
                    itemGap:20,
                    itemHeight:20,
                    textStyle:{
                        fontSize:18,
                    }
                },
                label:{
                    formatter:function(param){
                        return param.value
                    },
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['45%', '65%'],
                        center: ['15%', '47%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 41, name: '冶金行业',itemStyle: { color: '#aa89bd' }},
                            {value: 20, name: '机械行业',itemStyle: { color: '#f1bc30' }},
                            {value: 20, name: '烟草行业',itemStyle: { color: '#7ecef4' }},
                            {value: 20, name: '有色行业',itemStyle: { color: '#eb6100' }},
                            {value: 20, name: '轻工行业',itemStyle: { color: '#b3d465' }},
                            {value: 20, name: '商贸行业',itemStyle: { color: '#f19ec2' }},
                            {value: 20, name: '建材行业',itemStyle: { color: '#00b7ee' }},
                            {value: 20, name: '纺织行业',itemStyle: { color: '#e5004f' }},
                        ]
                    }
                ]
            };
        },
        mounted() {
            this.echartObjLeft1 = this.initEcharts(this.$refs['echartLeft1'], this.echartsOptionLeft1);
            this.echartObjRight1 = this.initEcharts(this.$refs['echartRight1'], this.echartsOptionRight1);
            this.echartObjRight2 = this.initEcharts(this.$refs['echartRight2'], this.echartsOptionRight2);
            this.echartObjRight3 = this.initEcharts(this.$refs['echartRight3'], this.echartsOptionRight3);
        },
        components: {
            BaseMap,
        },
    }
</script>

<style scoped lang="less">
    .el-select-dropdown__item{
        text-align: center;
    }
    .el-select-dropdown__item.selected {
        font-weight: normal;
        background: #faf0e4;
        color: @font_color;
    }
    .home {
        height: 100%;
        width: 100%;
        padding: 0;
        color: @font_color;
        .left-div{
            position: absolute;
            margin: .015rem 0 .015rem .015rem;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            left: 0%;
            div.fengxianyinhuan {
                display: flex;
                flex-wrap: wrap;
                background: @color3;
                box-sizing: border-box;
                height: 43%;
                padding: 0.015rem 0.015rem 0 0.015rem;
                align-content: flex-start;
                margin-bottom: 0.016rem;
                p,span{
                    line-height: 0.025rem;
                    height: 0.025rem;
                }
                p.title {
                    font-size: 0.02rem;
                    width: 100%;
                    font-weight: bold;
                }
                p.title2 {
                    font-size: 17px;
                    width: 100%;
                    text-align: center;
                    font-weight: bold;
                    margin: 0 0 0.015rem 0;
                }
                div.items-container {
                    width: 50%;
                    height: calc((100% - 0.105rem)/3);
                    a.items-image {
                        width: 0.05rem;
                        height: 0.05rem;
                        float: left;
                        margin-left: .02rem;
                    }
                    a.items-image-1 {background: url('../../../../assets/images/foot/成灾水位点.png') no-repeat center;}
                    a.items-image-2 {background: url('../../../../assets/images/foot/农林牧渔.png') no-repeat center;}
                    a.items-image-3 {background: url('../../../../assets/images/foot/企业.png') no-repeat center;}
                    a.items-image-4 {background: url('../../../../assets/images/foot/报警.png') no-repeat center;}
                    a.items-image-5 {background: url('../../../../assets/images/foot/毒素.png') no-repeat center;}
                    a.items-image-6 {background: url('../../../../assets/images/foot/辐射.png') no-repeat center;}
                    div.items-sub-container {
                        display: inline-block;
                        box-sizing: border-box;
                        padding-left: 0.02rem;
                        font-size: 0.016rem;
                        text-align: center;
                        font-weight: bold;
                        height: 0.07rem;
                        p.top {
                            height: 0.035rem;
                            line-height: 0.035rem;
                            span[type='number'] {
                                color: @font_color1;
                                font-size: 0.025rem;
                                padding-right: 0.005rem;
                            }
                        }
                        p.bottom {
                            height: 0.035rem;
                            line-height: 0.035rem;
                        }
                    }
                }
            }
            div.yunshu {
                display: flex;
                flex-wrap: wrap;
                background: @color3;
                box-sizing: border-box;
                height: 22%;
                margin-bottom: 0.016rem;
                padding: 0.015rem 0.015rem 0 0.015rem;
                align-content: flex-start;
                p,span{
                    line-height: 0.025rem;
                    height: 0.025rem;
                }
                p.title {
                    font-size: 0.02rem;
                    width: 100%;
                    font-weight: bold;
                }
                div.items-container {
                    text-align: center;
                    width: 30%;
                    padding: 0.04rem 0.015rem 0.015rem 0.015rem;
                    box-sizing: border-box;
                    p.bold {
                        font-weight: bold;
                        font-size: 0.02rem;
                        span {
                            font-size:0.03rem;
                            color: @font_color1;
                        }
                    }
                    p.bottom {
                        font-size: 15px;
                        padding-top: 10px;
                    }
                }
                div.items-container-2 {
                    display: flex;
                    margin: auto;
                    flex-direction: column;
                    justify-content: center;
                    width: 30%;
                    padding: 30px 0 0 30px;
                    box-sizing: border-box;
                }
            }
            div.cunliang {
                background: @color3;
                box-sizing: border-box;
                height: calc(35% - 32px);
                padding: 0.015rem;
                p,span{
                    line-height: 0.025rem;
                    height: 0.025rem;
                }
                p.title {
                    font-size: 0.02rem;
                    width: 100%;
                    font-weight: bold;
                    height: 0.025rem;
                }
                div.content {
                    height: calc(100% - 0.025rem);
                    width: 100%;
                    display: flex;
                    box-sizing: border-box;
                    div.item-1 {
                        width: 36%;
                        height: 100%;
                        box-sizing: border-box;
                        display: inline-flex;
                        flex-direction: column;
                        justify-content: center;
                        p {
                            text-align: center;
                        }
                        p[order='1'] {
                            span.value {
                                color: @font_color1;
                                font-weight: bold;
                                font-size: 0.03rem;
                                padding-right: 0.005rem;
                            }
                            span.unit {
                                font-weight: bold;
                                font-size: 0.016rem;
                            }
                        }
                        p[order='2'] {
                            padding-top: 0.02rem;
                            span[order='1'] {
                                font-size: 0.02rem;
                                padding-right: 0.01rem;
                                font-size: 0.017rem;
                            }
                            img {
                                width: 0.02rem;
                            }
                        }
                    }
                    div.echartLeft1 {
                        width: 33%;
                        height: 100%;
                        box-sizing: border-box;
                        display: inline-flex;
                    }
                    div.item-3 {
                        width: 31%;
                        height: 100%;
                        box-sizing: border-box;
                        display: inline-flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        p[order='1'] {
                            padding-bottom: 0.003rem;
                            span.value-1 {
                                font-size: 0.02rem;
                                color: @echart_color1;
                                padding-right: 0.005rem;
                                font-weight: bold;
                            }
                            span.unit {
                                font-size: 16px;
                                font-weight: 500;
                            }
                        }
                        p.type {
                            font-size: 0.018rem;
                            font-weight: 500;
                            padding-bottom: 0.01rem;
                        }
                        p[order='2'] {
                            padding-bottom: 0.005rem;
                            span.value-2 {
                                font-size: 0.02rem;
                                color: @echart_color2;
                                padding-right: 0.005rem;
                                font-weight: bold;
                            }
                            span.unit {
                                font-size: 0.016rem;
                                font-weight: 500;
                            }
                        }
                    }
                }
            }
        }

        .center-div{
            position: absolute;
            margin: .015rem;
            width: calc(40% - .03rem);
            height: calc(100% - .03rem);
            left: 30%;
            background: @color3;
        }

        .right-div{
            position: absolute;
            margin: .015rem .015rem .015rem 0;
            width: calc(30% - .015rem);
            height: calc(100% - .03rem);
            right: 0%;

            .container {
                background: @color3;
                box-sizing: border-box;
                padding: 0.015rem;
                p.title {
                    font-size: 0.02rem;
                    font-weight: bold;
                    line-height: 0.03rem;
                    height: 0.03rem;
                }
                p.title-2 {
                    height: 0.03rem;
                    line-height: 0.03rem;
                    text-align: center;
                    font-size: 0.018rem;
                    font-weight: 600;
                }
            }
            div.container[c-1] {
                height: 33%;
                p.text {
                    height: 0.04rem;
                    line-height: 0.04rem;
                    font-size: 0.017rem;
                    padding-left: 5%;
                    span[order='1'] {
                        font-weight: 600;
                    }
                    span[order='2'] {
                        padding-left: 0.04rem;
                        color: @font_color1;
                        font-size: 0.025rem;
                        font-weight: bold;
                    }
                    span[order='3'] {
                        padding-left: 0.007rem;
                        font-weight: bold;
                    }
                    span[order='4'] {
                        padding-left: 30%;
                    }
                    img {
                        width: 0.02rem;
                    }
                }
                div.echartRight1 {
                    width: 80%;
                    height: calc(100% - 100px);
                    margin-left: 10%;
                    display: inline-block;
                }
            }



            div.container[c-2] {
                margin-top: 0.02rem;
                height: calc(67% - 0.02rem);

                div.echartRight2 {
                    width: 95%;
                    padding-top: 0.01rem;
                    height: calc( (100% - 0.09rem)/2 );
                    box-sizing: border-box;
                    margin-left: 3%;
                }
                div.echartRight3 {
                    width: 95%;
                    height: calc( (100% - 0.09rem)/2 - 0.01rem);
                    box-sizing: border-box;
                    margin-left: 3%;
                }
                p.margin-top {
                    margin-top: 0.01rem;
                }

            }


        }
    }
</style>